<template>
  <div>
    <a-card
      class="table"
      :class="{ drakTheme: route?.meta?.theme == 'dark' || drakTheme }"
    >
      <template #title v-if="title">
        <p class="title">{{ title }}</p>
        <slot name="header"></slot>
      </template>
      <template #title v-else>
        <slot name="header"></slot>
      </template>

      <a-list
        :style="`overflow:hiddin auto;height:${height}`"
        :grid="grid"
        :data-source="dataSource"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <slot name="listItem" :item="item"></slot>
          </a-list-item>
        </template>
      </a-list>

      <a-pagination
        class="mt_20"
        show-quick-jumper
        v-model:current="page"
        :show-total="(total) => `共 ${total} 条`"
        :total="total"
        :defaultPageSize="pageSize"
        @change="onChange"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, toRefs } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const emits = defineEmits(["change"]);
const props = defineProps({
  drakTheme: Boolean,
  title: String,
  height: {
    type: Number,
    default: 240,
  },
  dataSource: [],
  total: Number,
  pageSize: {
    default: 10,
  },
  grid: {
    default: () => {
      // return { gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 };
      return null;
    },
  },
});
const { title, drakTheme, height, dataSource, total, pageSize, grid } = toRefs(props);
const page = ref(1);

function onChange(page) {
  emits("change", page);
}
</script>

<style lang="less" scoped></style>
